<template>
  <div>
      <a-modal
        :title="isView?'查看奖惩情况':(fromState.id?'编辑奖惩情况':'添加奖惩情况')"
        :visible="visible"
        @ok="handleOk"
        @cancel="visible = false"
        class="rewardsAndPunishmentsForm-achievement-form-model"
        :width="1020"
      >
      <a-form :form="form" style="margin-top: 24px;" v-if="visible">
        <a-descriptions bordered style="width: 100%;" :column="2" class="descriptions-add">
          <a-descriptions-item :span="2">
              <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" >*</span>
                  名称
              </span>
              <a-form-item ref="fmc" prop="fmc" v-if="!isView">
                <a-textarea placeholder="请输入名称" v-model="fromState.fmc" :auto-size="{ minRows: 2}"
                v-decorator="[ 'fmc', {initialValue:fromState.fmc,rules: rules.fmc}]"/>
              </a-form-item>
              <span v-else>{{ fromState.fmc }}</span>
          </a-descriptions-item>
          <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" >*</span>
                  类型
              </span>
              <a-form-item ref="flx" prop="flx" v-if="!isView">
                  <a-radio-group v-model="fromState.flx"
                  v-decorator="[ 'flx', {initialValue:fromState.flx,rules: rules.flx}]">
                    <a-radio value="奖励">
                      奖励
                    </a-radio>
                    <a-radio value="处罚">
                      处罚
                    </a-radio>
                  </a-radio-group>
              </a-form-item>
              <span v-else>{{ fromState.flx }}</span>
          </a-descriptions-item>
          <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" >*</span>
                  级别
              </span>
              <a-form-item ref="fjcjb" prop="fjcjb" v-if="!isView">
                  <!-- <a-input
                      v-model="fromState.fjcjb"
                      placeholder="请输入级别"
                      v-decorator="[ 'fjcjb', {initialValue:fromState.fjcjb,rules: rules.fjcjb}]"
                  /> -->
                  <compSelector
                    :key="compSelectorkey"
                    :defaultValue="fromState.fjcjb"
                    :compType="typeRadio"
                    class="comp-select-box-a"
                    dictionaryType="奖惩级别"
                    :height="32"
                    @selectHandleChange="fjcjbChange"
                    v-decorator="[ 'fjcjb', {initialValue:fromState.fjcjb,rules:rules.fjcjb}]"/>
              </a-form-item>
              <span v-else>{{ fromState.fjcjb }}</span>
          </a-descriptions-item>
          <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" >*</span>
                  批准时间
              </span>
              <a-form-item ref="fpzsj" prop="fpzsj" v-if="!isView">
                  <a-date-picker format="YYYY-MM-DD" @change="fpzsjChange"
                          v-decorator="[ 'fpzsj', {initialValue:fromState.fpzsj,rules: rules.fpzsj}]"/>
              </a-form-item>
              <span v-else>{{ moment(fromState.fpzsj).format('YYYY-MM-DD') }}</span>
          </a-descriptions-item>
          <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" >*</span>
                  批准机关
              </span>
              <a-form-item ref="fpzjg" prop="fpzjg" v-if="!isView">
                <a-textarea placeholder="请输入批准机关" v-model="fromState.fpzjg" :auto-size="{ minRows: 2}"
                v-decorator="[ 'fpzjg', {initialValue:fromState.fpzjg,rules: rules.fpzjg}]"/>
              </a-form-item>
              <span v-else>{{ fromState.fpzjg }}</span>
          </a-descriptions-item>
          <!-- <a-descriptions-item :span="2">
              <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" >*</span>
                  背景原因
              </span>
              <a-form-item ref="fbjyy" prop="fbjyy" v-if="!isView">
                <a-textarea placeholder="请输入背景原因" v-model="fromState.fbjyy" :auto-size="{ minRows: 2}"
                v-decorator="[ 'fbjyy', {initialValue:fromState.fbjyy,rules: rules.fbjyy}]"/>
              </a-form-item>
              <span v-else>{{ fromState.fbjyy }}</span>
          </a-descriptions-item> -->
          <a-descriptions-item :span="2">
              <span slot="label" class="descriptions-label-slot">
                  备注
              </span>
              <a-form-item ref="fbz" prop="fbz" v-if="!isView">
                  <a-textarea
                      v-model="fromState.fbz"
                      :auto-size="{ minRows: 2}"
                      placeholder="请输入备注"/>
              </a-form-item>
              <span v-else>{{ fromState.fbz }}</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-form>
      <template slot="footer">
          <div v-if="!isView">
            <a-button @click="visible = false">取消</a-button>
            <a-button @click="handleOk" class="blue-btn">提交并关闭</a-button>
          </div>
          <div v-else>
              <a-button @click="visible = false" class="blue-btn">关闭</a-button>
          </div>
      </template>
    </a-modal>
  </div>
</template>
<script>
import store from '@/store'
import moment from 'moment'
import compSelector from '@/components/compSelector/compSelector'
import {typeRadio} from '@/components/compSearchCriteria/ContractType'
import {
  addJcqk,
  editJcqk,
  queryByIdJlcfqk
} from './service/index'
export default {
  components:{
    compSelector
  },
  data() {
    return {
      moment,
      isView:false,
      visible:false,
      form:this.$form.createForm(this, { name: 'achievementFrom' }),
      fromState:{},
      typeRadio:typeRadio,
      compSelectorkey: '',
      rules:{
        fmc: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur',
        }],
        fbjyy: [{
            required: true,
            message: '请输入背景原因',
            trigger: 'blur',
        }],
        fpzsj: [{
            type: 'object',
            required: true,
            message: '请选择批准时间',
            trigger: 'blur',
        }],
        flx: [{
            required: true,
            message: '请选择类型',
            trigger: 'blur',
        }],
        fpzjg: [{
            required: true,
            message: '请输入批准机关',
            trigger: 'blur',
        }],
        fjcjb: [{
            required: true,
            message: '请输入级别',
            trigger: 'blur',
        }],
      }
    }
  },
  methods: {
    getData(val,isView){
        this.isView = isView
        if(val.id){
          queryByIdJlcfqk({id:val.id}).then(res=>{
                if(res.code ==  200){
                    this.fromState = res.result
                    this.fromState.fpzsj = res.result.fpzsj?moment(res.result.fpzsj):''
                }else{
                    this.$message.warning(res.message)
                }
            })
        }else{
            this.fromState = {}
        }
    },
    fpzsjChange(date, dateString){
      //console.log(date, dateString);
      this.fromState.fpzsj = date?moment(date):null
      //console.log(this.fromState.fpzsj)
    },
    fjcjbChange(val){
      this.fromState.fjcjb = val
      this.form.setFieldsValue({
        fjcjb: val,
      });
    },
    handleOk(){
            this.form.validateFields((err, values) => {
                if(!err){
                    let data = {
                        ...this.fromState,
                        fpzsj:moment(this.fromState.fpzsj).format('YYYY-MM-DD'),
                    }
                    //console.log(data)
                    if(this.fromState.id){
                      editJcqk(data).then(res=>{
                            if(res.code == 200){
                                this.$message.success(res.message)
                                this.getData({id:this.fromState.id})
                                this.visible = false
                                this.$emit('successRewardsAndPunishments')
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }else{
                      data = {
                        ...data,
                        fuserid: store.getters.userInfo.id
                      }
                      addJcqk(data).then(res=>{
                            if(res.code == 200){
                                this.$message.success(res.message)
                                this.visible = false
                                this.getData({id:res.result.id})
                                this.$emit('successRewardsAndPunishments')
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                }else{
                }
            })
        },
  },
}
</script>
<style lang="less">
  .rewardsAndPunishmentsForm-achievement-form-model {
    .ant-form-item {
      margin-bottom: 0px;
      textarea.ant-input {
          margin-bottom: 0px;
          height: 46px;
      }
    }
    .ant-descriptions-bordered .ant-descriptions-item-label{
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      background-color:#e6f7ff;
      width: 150px !important;
      text-align: center;
      font-size: 16px;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
        padding: 5px 10px !important;

    }
    .xhText{
      color: #f5222d;
      line-height: 36px;
      font-size: 21px;
      font-weight: 600;
      height: 30px;
    }
    .descriptions-label-slot{
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
